<template>
    <div @click="onToggle" style="margin-left: 10px">
        <el-tooltip content="全屏显示" placement="bottom">
        <el-icon size="25"><FullScreen /></el-icon>
        </el-tooltip>
    </div>
</template>
<script setup>
import {FullScreen} from '@element-plus/icons-vue'
import {ref,onMounted,onUnmounted} from "vue"
import screenfull from "screenfull"

//是否全屏
const isFullScreen = ref(false)

//监听变化
const change = () => {
    isFullScreen.value = screenfull.isFullscreen;

}

//切换事件
const onToggle = () => {
    screenfull.toggle();
}
//设置监听器
onMounted(() => {
    screenfull.on("change",change);
})
//删除监听器
onUnmounted(()=>{
    screenfull.off("change",change);
})

</script>
